<template>
	<view class="index" :style="[navBackground]">
		<!-- #ifdef H5 -->
		<download-nav v-if="isShowDownload"></download-nav>
		<!-- #endif -->
		<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="enable">
			<u-navbar :border-bottom="false" :is-fixed="false" title="机构" :title-bold="true" custom-class="home-bg" :background="navBackground"
				:is-back="false">
				<view class="nav-top">
					<view class="logo-top">
						<!-- <view class="logo-top__city" @click="showCtyOptions = true">{{ currentCity }}<u-icon name="arrow-down"></u-icon></view> -->
						<view class="logo-top__city" @click="goPageNotLogin('/pages/city-selects/city-selects?page=institution')">{{ currentCity }}<u-icon name="arrow-down"></u-icon></view>
						<!-- <u-select v-model="showCtyOptions" mode="mutil-column-auto" value-name="adcode" cancel-text="重置" label-name="name" child-name="districts" :list="cityOptions" @confirm="selectCity" @cancel="cencelCity"></u-select> -->
					</view>
					<!-- <u-icon @click="goPage('/pages/goods_search/goods_search')" name="search" size="34"></u-icon> -->
				</view>
			</u-navbar>
		</u-sticky>
		<view class="search">
			 <u-search placeholder="搜索项目、医生、医院" @focus="goPage('/pages/goods_search/goods_search')" bg-color="#F4F4F4" name="search" size="34"></u-search>
		</view>
<!-- 		<view @click="copyWechat" class="banner">
			<image class="banner-img" src="@/static/images/banner001.png"></image>
		</view> -->
		<view class="contain">
			<view class="main">
				<view class="hot merchants-container">
					<!-- <active-area type="hot" progressBarColor="#9912FE" :lists="indexList.list">
					</active-area> -->
					<view class="merchants-list">
						<view class="merchants-item" v-for="(item, index) in indexList.list" :key="index">
							<view class="merchant-top">
								<view class="merchant-top-left">
									<custom-image :lazy-load="true" width="104rpx" height="104rpx" radius="52rpx" lazy-load :src="item.logo"></custom-image>
									<view class="merchant-top-main">
										<view class="merchant-top-title">
											{{ item.name }}
										</view>
										<view class="merchant-top-msg">
											<view v-if="item.doctor_num">医生{{ item.doctor_num }}</view>
											<view v-if="item.merchant_room_num && item.doctor_num" class="msg-line">|</view>
											<view v-if="item.merchant_room_num">诊室{{ item.merchant_room_num }}间</view>
										</view>
										<!-- <view class="merchant-top-tips">
											<view class="merchant-tips-item">
												严选机构
											</view>
											<view class="merchant-tips-item">
												安选商家
											</view>
										</view> -->
									</view>
								</view>
								<view class="merchant-top-right" @click="goPage('/pages/institution_details/institution_details?id=' + item.id)">
									进店看看
								</view>
							</view>
							<view class="merchant-main" v-if="item.products && item.products.length">
								<navigator hover-class="none" open-type="navigate" :url="'/pages/goods_details/goods_details?id=' + _item.id" class="merchant-product" v-for="(_item, _index) in item.products" :key="_index">
									<custom-image :lazy-load="true" width="218rpx" height="218rpx" radius="16rpx" lazy-load :src="_item.pics[0]"></custom-image>
									<view class="product-title line2">
										{{ _item.title }}
									</view>
									<view class="product-price-main">
										<view class="product-price">
											￥ <text class="price-color">{{ _item.price ? _item.price / 100 : '-' }}</text>
										</view>
										<!-- <view class="product-num">
											已省￥516
										</view> -->
									</view>
								</navigator>
							</view>
						</view>
					</view>
					<!-- :status="indexList.status" -->
					<loading-footer :status="indexList.status" :slot-empty="true">
						<view slot="empty" class="column-center" style="padding-top: 200rpx">
							<image class="img-null" src="/static/images/goods_null.png"></image>
							<text class="lighter">暂无机构</text>
						</view>
					</loading-footer>
				</view>
			</view>

		</view>

		<!-- #ifdef APP-PLUS -->
		<lyg-popup v-if="appConfig.app_agreement" title="服务协议和隐私政策"
			protocolPath='/bundle/pages/server_explan/server_explan?type=0'
			policyPath='/bundle/pages/server_explan/server_explan?type=1' policyStorageKey="has_read_privacy">
		</lyg-popup>
		<!-- #endif -->
		
		<u-back-top :scroll-top="scrollTop" :top="1000" :customStyle="{ backgroundColor: '#FFF', color: '#000', boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'}"></u-back-top>
		
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getHome,
		getMenu,
		getBestList,
		getCatrgory,
		getGoodsSearch,
		getMerchant
	} from '@/api/store';
	import {
		loadingType
	} from '@/utils/type'
	import {
		loadingFun,
		menuJump,
		arraySlice,
		setTabbar,
		getRect,
		trottle
	} from '@/utils/tools'
	import {
		toLogin
	} from '@/utils/login'
	import Cache from '@/utils/cache'
	import {
		getRegisterCoupon
	} from '@/api/app'
	import City from '@/utils/city.json'
	const app = getApp()
	export default {
		data() {
			return {
				scrollTop: 0,
				navSwiperH: 374,
				logo: "",
				navHeight: 0,
				currentSwiper: 0,
				page: 1,
				status: loadingType.LOADING,
				remainTime: "",
				navBg: 0,
				navList: [],
				news: [],
				goodsList: [],
				seckill: {},
				seckillGoods: [],
				hotGoods: [],
				newGoods: [],
				activityArea: [],
				couponPopList: [],
				coupon: [],
				isDischarge: true,
				enable: true,
				isShowDownload: false,
				cate_tab: {
					data: [
						{name: '全部', 'id': 0},
						{name: '热销', 'id': -1},
					],
					current: 0
				},
				indexList: {
					params: {
						page: 1,
						pagesize: 10,
						id: null,
						keyword: null,
						province: null,
						city: null
					},
					list: [],
					status: loadingType.LOADING,
				},
				currentCity: "全部城市",
				showCtyOptions: false,
				cityOptions: City,
				showCate: false,
				cateOptions: [],
				currentCate: [],
				first_cate: "全部分类",
				second_cate: "",
				third_cate: ""
			}
		},
		async onLoad(options) {
			this.headerAction = wx.createAnimation({
				delay: 0,
				duration: 100,
				timingFunction: "ease-in-out"
			})
			this.onPageScroll = trottle(this.onPageScroll, 500, this)
			setTabbar()
			this.navHeight = app.globalData.navHeight
			this.isDischarge = false;
			// await this.getMenuFun()
			// this.getBestListFun()
			const cates = await getCatrgory();
			this.getGoodsList();
			this.cateOptions = cates.d.data
			if (this.cateOptions && this.cateOptions.length) {
				this.delArr(this.cateOptions)
			}
			
			// #ifdef H5
			if (options && options.isapp == 1) {
				this.isShowDownload = true;
			}
			// #endif
		},
		async onShow() {
			this.$nextTick(function(){
				getRect('.index').then((res) => {
					if(res.top == 0) {
						this.navBg = 0
					}
				})
			})
			let {privice, city} = getApp().globalData
			if (privice == '推荐') {
				privice = city = '';
			}
			
			if (privice && city) {
				this.indexList.params.province = privice
				this.indexList.params.city = city
				this.currentCity = city
				this.indexList.params.page = 1;
				this.indexList.list = [];
				this.indexList.status = loadingType.LOADING;
				this.getGoodsList()
			} else {
				this.indexList.params.province = null
				this.indexList.params.city = null
				this.currentCity = '全部城市'
				this.indexList.params.page = 1;
				this.indexList.list = [];
				this.indexList.status = loadingType.LOADING;
				this.getGoodsList()
			}
			// #ifdef H5
			this.enable = true
			// #endif
			// await this.getHomeFun() // 获取首页数据接口
			// this.getCartNum() // 购物车数量
		},
		onHide() {
			// #ifdef H5
			this.enable = false
			// #endif
		},
		onReachBottom() {
			//this.getBestListFun()
			this.getGoodsList();
		},
		onPullDownRefresh() {
			// this.getHomeFun()
			// this.getMenuFun();
			this.indexList.params.page = 1;
			this.indexList.list = [];
			this.indexList.status = loadingType.LOADING;
			this.getGoodsList();
		},
		onShareAppMessage() {
			console.log(this.inviteCode)
			const shareInfo = Cache.get('shareInfo')
			return {
				title: shareInfo.mnp_share_title,
				path: "pages/index/index?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			if(!this.enable) return
			let percent = scrollTop / top
			this.navBg = percent > 1 ? 1 : percent
			this.scrollTop = scrollTop
		},
		destroyed() {
			this.isDischarge = true;
		},
		methods: {
			...mapActions(['getCartNum']),
			async getHomeFun() {
				const {
					code,
					data
				} = await getHome();
				uni.stopPullDownRefresh()
				if (code == 1) {
					const {
						coupon,
						news,
						seckill,
						host_goods,
						shop_logo,
						new_goods,
						activity_area
					} = data;
					this.remainTime = Math.abs(seckill.end_time - Date.parse(new Date()) / 1000);
					this.logo = shop_logo
					this.news = news
					this.seckillGoods = seckill.goods
					this.seckill = seckill
					this.hotGoods = host_goods
					this.coupon = coupon
					this.newGoods = new_goods
					this.activityArea = activity_area

				}
				await this.getGoodsList();
			},
			
			async getMenuFun() {
				const {
					code,
					data
				} = await getMenu({
					type: 1
				});
				uni.stopPullDownRefresh()
				if (code == 1) {
					//   截取数组
					if (data.length <= 5) {
						this.navSwiperH = 200
					} else {
						this.navSwiperH = 374
					}
					this.navList = arraySlice(data);
				}
			},
			async getBestListFun() {
				let {
					page,
					goodsList,
					status
				} = this
				// const data = await loadingFun(getBestList, page, goodsList, status)
				if (!data) return
				this.page = data.page
				this.goodsList = data.dataList
				this.status = data.status
			},
			async tapMenu(item) {
				if (!this.isLogin) return toLogin()
				menuJump(item)
			},
			goPage(url) {
				// 暂时注释
				// if (!this.isLogin) return toLogin()
				uni.navigateTo({
					url
				})
			},
			goPageNotLogin(url) {
				uni.navigateTo({
					url
				})
			},
			swiperChange(e) {
				this.currentSwiper = e.detail.current
			},
			copyWechat() {			
				uni.setClipboardData({
					data: '17821883911',
					success() {
						uni.showToast({
							title: '微信号已复制'
						})
					}
				})
			},
			async getGoodsList() {
				if (loadingType.FINISHED == this.indexList.status) return;
				const data = await loadingFun(getMerchant, this.indexList.params.page, this.indexList.list, this.indexList.status, this.indexList.params);
				console.log(data, 'data')
				if (!data) return
				this.indexList.params.page  = data.page;
				data.dataList.forEach(item => {
					if (item.products.length > 3) {
						item.products.length = 3
					}
				})
				this.indexList.list = data.dataList;
				this.indexList.status = data.status;
			},
			switchCate(index) {
				console.log(index);
				const cate = this.cate_tab.data[index];
				this.cate_tab.current = index;
				this.indexList.params.page = 1;
				this.indexList.list = [];
				this.indexList.status = loadingType.LOADING;
				this.getGoodsList();
			},
			selectCity(value) {
				// this.showCtyOptions = false
				// this.currentCity = value[value.length - 1].label
				// this.indexList.params.province = value[0].label
				// this.indexList.params.city = value[1].label
				// this.indexList.params.page = 1;
				// this.indexList.list = [];
				// this.indexList.status = loadingType.LOADING;
				// this.getGoodsList()
			},
			cencelCity() {
				// if (this.currentCity !== "全部城市") {
				// 	this.currentCity = "全部城市"
				// 	this.indexList.params.province = null
				// 	this.indexList.params.city = null
				// 	this.indexList.params.page = 1;
				// 	this.indexList.list = [];
				// 	this.indexList.status = loadingType.LOADING;
				// 	this.getGoodsList()
				// }
				// this.showCtyOptions = false
			},
			// 回调参数为包含columnIndex、value、values
			confirmCate(e) {
				console.log('confirm', e)
				this.currentCate = []
				e.forEach(item => {
					if(item.value) {
						this.currentCate.push(item)
					}
				})
				this.showCate = false
				this.indexList.params.first_cate_id = this.currentCate[0].value
				this.first_cate = e[0].label
				if (this.currentCate.length === 2) {
					this.indexList.params.second_cate_id = this.currentCate[1].value
					this.second_cate = e[1].label
				} else if (this.currentCate.length === 3) {
					this.indexList.params.second_cate_id = this.currentCate[1].value
					this.second_cate = e[1].label
					this.indexList.params.third_cate_id = this.currentCate[2].value
					this.third_cate = e[2].label
				}
				this.indexList.params.page = 1;
				this.indexList.list = [];
				this.indexList.status = loadingType.LOADING;
				this.getGoodsList()
			},
			cencelCate() {
				this.indexList.params.first_cate_id = null
				this.indexList.params.second_cate_id = null
				this.indexList.params.third_cate_id = null
				this.currentCate = []
				this.first_cate = "全部分类"
				this.second_cate = ""
				this.third_cate = ""
				this.indexList.params.page = 1;
				this.indexList.list = [];
				this.indexList.status = loadingType.LOADING;
				this.getGoodsList()
			},
			changeCate() {
				this.showCate = true
			},
			delArr(obj) {
				obj.forEach(item => {
					if (item.children && item.children.length) {
						this.delArr(item.children)
					} else {
						item.children = ''
					}
				})
			}
		},
		computed: {
			...mapGetters(["cartNum", "inviteCode", "appConfig"]),
			navBackground() {
				return this.seting.top_bg_image ? {
					'background-image': `url(${this.seting.top_bg_image})`
				} : {}
			},
			showLogo() {
				return this.seting.logo
			},
			navSearch() {
				if(this.showLogo === 0) return true
				
				return this.navBg < 1 ? false : true
			},
			seting() {
				const {
					index_setting
				} = this.appConfig
				return index_setting
			}
		}
	}
</script>

<style lang="scss">
	.home-bg{
		background-color: #fff;
	}
	.nav-top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-right: 20rpx;
		.logo-top{
			display: flex;
			align-items: center;
			&__logo{
				width: 108upx;
				height: 48upx;
				margin-right: 6upx;
			}
			&__slogan{
				width: 280upx;
				height: 40upx;
			}
			&__city {
				display: flex;
				align-items: center;
				margin-left: 10upx;
			}
		}
	}
	.grid-nav{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 20upx 20upx;
		&__img{
			width: 224upx;
			height: 126upx;
		}
	}
	.banner{
		margin: 0 20upx;
		&-img{
			width: 708upx;
			height: 182upx;
		}
	}
	.index {
		
		.live-play {
			position: fixed;
			z-index: 999;
			bottom: 200rpx;
			right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 80rpx;
			border: $-solid-border;
			border-radius: 50%;
			font-size: 32rpx;
			background-color: #FFFFFF;
			
			&__icon {
				animation: scale .5s infinite;
			}
			
			@keyframes scale
			{
				from {
					top:0px;
					transform: scale(1);
				}
				to {
					transform: scale(1.2);
				}
			}
		}
		


		background-size: 100% auto;

		.logo-wrap {
			position: absolute;

			.logo {
				width: auto;
				height: 52rpx;
			}
		}


		.header {
			.navigation-bar {
				padding-top: var(--status-bar-height);
				box-sizing: border-box;
			}
		}

		.contain {

			.main {
				position: relative;
				z-index: 9;
				/*padding: 0 20rpx;*/

				.nav {
					position: relative;
					border-radius: 14rpx;

					.nav-item {
						width: 20%;
						margin-top: 30rpx;

						.nav-icon {
							width: 82rpx;
							height: 82rpx;
							margin-bottom: 15rpx;
						}
					}

					.dots {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: 20rpx;
						display: flex;

						.dot {
							width: 10rpx;
							height: 6rpx;
							border-radius: 6rpx;
							margin-right: 10rpx;
							background-color: rgba(255, 44, 60, 0.4);

							&.active {
								width: 20rpx;
								background-color: $-color-primary;
							}
						}

					}

				}

				.information {
					height: 76rpx;
					box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.06);
					padding: 0 20rpx;
					box-sizing: border-box;
					border-radius: 14rpx;

					.news {
						position: relative;

						.shade {
							position: absolute;
							width: 100%;
							height: 100%;
							z-index: 100;
						}
					}

					.icon-toutiao {
						width: 114rpx;
						height: 34rpx;

					}

					.gap-line {
						height: 28rpx;
						width: 1px;
						background-color: #DCDDDC;
						margin: 0 30rpx;
					}
				}

				.special-area {
					.item {
						width: 300rpx;
						border-radius: 20rpx;
						display: inline-block;
						overflow: hidden;
						margin-right: 20rpx;

						.title {
							padding: 10rpx 0;
						}

						.desc {
							background-color: #FEE9EB;
							padding: 6rpx 20rpx;
							border-radius: 60rpx;
							max-width: 260rpx;
						}
					}

				}

				.cateList {
					width: 100%;
					box-sizing: border-box;
					padding: 0 40rpx;
					display: flex;
					align-items: center;
					height: 80rpx;
					.cate-item {
						width: 33.33%;
						text-align: center;
					}
				}

				.activity-header {
					height: 90rpx;
					padding: 0 20rpx;
				}

				.seckill {
					.dec {
						background-color: #FFFBDB;
						width: 150rpx;
					}
				}

				.hot,
				.new-goods {
					.title-image {
						width: 144rpx;
						height: 55rpx;
					}
				}
			}

			.goods {
				.goods-title {
					height: 100rpx;

					.line {
						width: 58rpx;
						height: 1px;
						background-color: #ccc;
						margin: 0 22rpx;
					}

					.icon {
						width: 38rpx;
						height: 38rpx;
					}
				}
			}
		}
	}
	.merchants-container {
		margin-top: 40rpx;
		.merchants-list {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			.merchants-item {
				margin-bottom: 20rpx;
				border-bottom: 2rpx solid #F8F8F8;
				padding-bottom: 30rpx;
				.merchant-top {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					margin-bottom: 20rpx;
					.merchant-top-left {
						display: flex;
						align-items: flex-start;
						width: calc(100% - 130rpx);
						.merchant-top-main {
							margin-left: 20rpx;
							.merchant-top-title {
								color: #000000;
								font-weight: 700;
								font-size: 32rpx;
								margin-bottom: 10rpx;
							}
							.merchant-top-msg {
								color: #868A90;
								font-weight: 400;
								font-size: 24rpx;
								display: flex;
								align-items: center;
								margin-bottom: 10rpx;
								.msg-line {
									margin: 0 10rpx;
								}
							}
							.merchant-top-tips {
								display: flex;
								align-items: center;
								flex-wrap: wrap;
								.merchant-tips-item {
									width: 100rpx;
									height: 30rpx;
									line-height: 30rpx;
									text-align: center;
									color: #EDD7C2;
									font-weight: 500;
									font-size: 18rpx;
									margin-right: 10rpx;
									background-color: #563D3E;
									border-radius: 15rpx;
								}
							}
						}
					}
					.merchant-top-right {
						width: 130rpx;
						height: 42rpx;
						border-radius: 21rpx;
						text-align: center;
						line-height: 42rpx;
						font-size: 28rpx;
						color: #000000;
					}
				}
				.merchant-main {
					display: flex;
					align-items: flex-start;
					.merchant-product {
						width: 30%;
						margin-right: 5%;
						.product-title {
							color: #000000;
							height: 38rpx;
							font-weight: 400;
							font-size: 28rpx;
							margin: 10rpx 0;
						}
						.product-price-main {
							display: flex;
							align-items: center;
							justify-content: space-between;
							.product-price {
								color: #FF5E61;
								font-weight: 600;
								font-size: 18rpx;
								.price-color {
									font-size: 30rpx;
								}
							}
							.product-num {
								color: #A1A1B4;
								font-weight: 400;
								font-size: 20rpx;
							}
						}
					}
					.merchant-product:nth-child(3n) {
						margin-right: 0;
					}
				}
			}
		}
	}
</style>
